<template>
	<el-card shadow="hover" header="欢迎">
		<template #header>
			<el-icon style="display: inline; vertical-align: middle"> <ele-Promotion /> </el-icon>
			<span style=""> 欢迎 </span>
		</template>
		<div class="welcome">
			<div class="logo">
				<!-- <img src="/@/assets/logo.png" style="height: 150px;"/> -->
				<h2>欢迎使用 {{ themeConfig.globalTitle }}</h2>
			</div>
			<div class="tips">
				<div class="tips-item">
					<div class="tips-item-icon">
						<el-icon><ele-Menu /></el-icon>
					</div>
					<div class="tips-item-message">这里是项目控制台，你可以点击右上方的“自定义”按钮来添加移除或者移动部件。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon">
						<el-icon><ele-Promotion /></el-icon>
					</div>
					<div class="tips-item-message">在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon">
						<el-icon><ele-MilkTea /></el-icon>
					</div>
					<div class="tips-item-message">让开发更简单、更通用、更流行！</div>
				</div>
			</div>
			<div class="actions">
				<el-button type="primary" icon="ele-Guide" size="large" @click="godoc">文档教程</el-button>
			</div>
		</div>
	</el-card>
</template>

<script lang="ts">
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

export default {
	title: '欢迎',
	icon: 'ele-Promotion',
	description: '项目特色以及文档链接',
};
</script>

<script setup lang="ts" name="welcome">
const godoc = () => {
	window.open('http://101.43.53.74:5050/');
};
</script>

<style scoped>
.welcome .logo {
	text-align: center;
}

.welcome .logo img {
	vertical-align: bottom;
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
}

.welcome .logo h2 {
	font-size: 30px;
	font-weight: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tips {
	margin-top: 20px;
	padding: 0 40px;
}

.tips-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7.5px 0;
}

.tips-item-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 18px;
	margin-right: 20px;
	color: var(--el-color-primary);
	background: rgba(180, 180, 180, 0.1);
}

.tips-item-message {
	flex: 1;
	font-size: 14px;
}

.actions {
	text-align: center;
	margin: 40px 0 20px 0;
}
</style>
